import React, { Component } from "react";
import './main.css'
import TodoItem from "./TodoItem";
import Footer from "./Footer";
import { todoAdd,todoGet,todoUpdate,todoBatch,todoDel } from "../api";

export default class Todo extends Component {
    constructor(){
        super()
        this.state = {
            todolist:[
                // {objectId:Math.random(),taskname:'吃饭',ischeck:false},
                // {objectId:Math.random(),taskname:'睡觉',ischeck:true},
                // {objectId:Math.random(),taskname:'写代码',ischeck:false}
            ],
            msg:'',
            tabIdx:0   //底部菜单控制 0所有任务  1已完成  2未完成
        }
    }
    componentDidMount(){
        todoGet().then(res=>{
            this.setState({
                todolist:res.data.results
            })
        })
    }
    handleSend = (ev)=>{ //新增任务
        let {todolist,msg} = this.state
        if(ev.keyCode===13&&msg.trim()!==''){
            let obj = {taskname:msg,ischeck:false}
            todoAdd(obj).then(res=>{ //新增数据库
                console.log(res);
                let {objectId} = res.data
                todolist.push({objectId,...obj})
                this.setState({
                    todolist,
                    msg:''
                })
            })
        }
    }
    handleChange = (ev)=>{ //负责修改msg
        // console.log(ev.target);
        this.setState({msg:ev.target.value})
    }
    handleCheck = (id)=>{ //单选功能
        console.log(id);
        let {todolist} = this.state
        let len = todolist.length
        let bool = true
        for(let i=0;i<len;i++){
            if(todolist[i].objectId===id){
                bool = !todolist[i].ischeck
                todolist[i].ischeck = bool
                break
            }
        }
        todoUpdate(id,{ischeck:bool}).then(res=>{ //更新数据库
            this.setState({todolist})
        })
        
    }
    handleAllCheck = ()=>{ //全选控制单选
        // 当前的全选状态
        console.log(this.allCheck());
        let bool = this.allCheck() //原来的全选状态
        let {todolist} = this.state
        todoBatch(todolist,'PUT',!bool).then(()=>{ //批量更新
            todolist.forEach(item=>{
                item.ischeck = !bool
            })
            this.setState({todolist})
        })
    }
    handleUpdate = (id,taskname)=>{ //修改任务名称
        let {todolist} = this.state
        let len = todolist.length
        todoUpdate(id,{taskname}).then(res=>{ //更新线上
            for(let i=0;i<len;i++){
                if(todolist[i].objectId===id){
                    todolist[i].taskname = taskname
                    break
                }
            }
            this.setState({todolist})
        })
    }
    handleDelCheck = ()=>{ //删除已完成
        let {todolist} = this.state
        todoBatch(todolist).then(res=>{ //批量删除线上数据
            for(let i=todolist.length-1;i>=0;i--){
                if(todolist[i].ischeck){
                    todolist.splice(i,1)
                }
            }
            this.setState({todolist})
        })
    }
    handleTab = (tabIdx)=>{  //底部菜单切换
        this.setState({tabIdx})
    }
    handleDel = (id)=>{ //单个删除
        let {todolist} = this.state
        let len = todolist.length
        todoDel(id).then(()=>{
            for(let i=0;i<len;i++){
                if(todolist[i].objectId===id){
                    todolist.splice(i,1)
                    break
                }
            }
            this.setState({todolist})
        })
    }

    allCheck = ()=>{ //负责根据todolist数据包，实时运算得到一个控制全选按钮的布尔值
        let {todolist} = this.state
        let bool = true
        for(let i=0;i<todolist.length;i++){
            if(!todolist[i].ischeck){
                bool = false
                break
            }
        }
        return bool
    }

    leftNum = ()=>{ //统计剩余任务数量
        let {todolist} = this.state
        let n = 0
        for(let i=0;i<todolist.length;i++){
            if(!todolist[i].ischeck){
                n++
            }
        }
        return n
    }

    filterTodoList = ()=>{ //根据tabIdx过滤todolist
        let {tabIdx,todolist} = this.state
        switch (tabIdx) {
            case 1:  //已完成
                let arr = todolist.filter(item=>{
                    return item.ischeck
                })
                return arr
            case 2:  //未完成
                return todolist.filter(item=>{
                    return !item.ischeck
                })
            default:   //全部
                return todolist;
        }
    }
    
    render() {
        console.log('render执行了');
        return (
        <div className="cont">
            <header className="header">
            <h1>Todos</h1>
            <input 
                value={this.state.msg} 
                onChange={this.handleChange}  
                onKeyUp={this.handleSend}
                type="text" 
                className="new-todo" 
                placeholder="请输入待办事项~" 
            />
            </header>

            <section className="main">
            <input 
                type="checkbox" 
                className="toggle-all" 
                checked={this.allCheck()}
                onChange={this.handleAllCheck}
            />
            <ul className="todo-list">
                {
                    this.filterTodoList().map((item,index)=>{
                        return <TodoItem 
                            key={item.objectId} 
                            {...item}
                            idx={index}
                            handleCheck = {this.handleCheck}
                            handleUpdate = {this.handleUpdate}
                            handleDel = {this.handleDel}
                        />
                    })
                }
            </ul>
            </section>

            {
                this.state.todolist.length
                ?
                <Footer 
                    leftnum={this.leftNum()}
                    tabIdx={this.state.tabIdx}
                    handleDelCheck={this.handleDelCheck}
                    handleTab={this.handleTab}
                />  
                :
                ''        
            }
        </div>
        );
    }
}
